/**
 * 扩展程序使用内容脚本来读取和修改网页内容。当用户访问 Chrome API 参考页面时，扩展程序的内容脚本会将当天的提示更新到该页面。它发送消息，请求从服务工件获取当天的提示。
 * 内容脚本是在网页情境中运行的文件。借助标准文档对象模型 (DOM)，它们能够读取浏览器访问的网页的详细信息、对其进行更改，并将信息传递给其父级扩展程序。
 */
(async () => {
    // Sends a message to the service worker and receives a tip in response
    const { tip } = await chrome.runtime.sendMessage({ greeting: 'tip' });

    const nav = document.querySelector('.upper-tabs > nav');

    const tipWidget = createDomElement(`
    <button type="button" popovertarget="tip-popover" popovertargetaction="show" style="padding: 0 12px; height: 36px;">
      <span style="display: block; font: var(--devsite-link-font,500 14px/20px var(--devsite-primary-font-family));">Tip</span>
    </button>
  `);

    const popover = createDomElement(
        `<div id='tip-popover' popover style="margin: auto;">${tip}</div>`
    );

    document.body.append(popover);
    nav.append(tipWidget);
})();

function createDomElement(html) {
    const dom = new DOMParser().parseFromString(html, 'text/html');
    return dom.body.firstElementChild;
}